<template>
  <a-drawer
    :title="title"
    :width="800"
    placement="right"
    :closable="false"
    @close="close"
    :visible="visible"
  >
    <a-spin :spinning="confirmLoading">
      <a-steps progressDot direction="vertical" :current="traceData.length" >
        <a-step v-for="(trace,traceIndex) in traceData" :key="'trace'+traceIndex" :title="trace.label" >
          <p slot="description">
            {{trace.content}}
            <br/>
            {{trace.createTime}}
          </p>
        </a-step>
      </a-steps>

    </a-spin>
  </a-drawer>
</template>

<script>
  import pick from 'lodash.pick'
  import { httpAction } from '@/api/manage'
  import { getAction } from '@/api/manage'

  export default {
    name: "OmsOrderTraceModal",
    components: {
    },
    data () {
      return {
        title:"订单跟踪",
        visible: false,
        confirmLoading: false,
        model: {},
        traceData:[],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        url: {
          queryOmsOrderTrace: "/stm/omsOrder/queryOmsOrderTrace",
        },
      }
    },
    created () {
      console.log("created");
    },
    methods: {
      show(record) {
        //this.form.resetFields();
        this.visible = true;
        this.model = record;
        this.loadTraceData();
      },
      loadTraceData() {
        this.traceData = [];
        var params = { id: this.model.id };
        this.loading = true;
        getAction(this.url.queryOmsOrderTrace, params).then((res) => {
          if (res.success) {
            this.traceData = res.result;
          }
        }).finally(() => {
          this.loading = false;
        })
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleSubmit () {

      },
      handleCancel () {
        this.close()
      },
    }
  }
</script>
<style>
  .ant-steps-dot .ant-steps-item-content {
    width: 90%;
  }
  p {
    margin-top: 0;
    margin-bottom: 0em;
  }
</style>